<template>
  <div>
      <el-card class="box-card">
          <div class="flexBetween">
            <div class="flex">
                <el-input placeholder="请输入" v-model="name" size="small"></el-input>
                <el-button type="primary" size="small" class="paddingLeft">查询</el-button>
            </div>
            <div>
                <el-button size="small" type="primary" plain icon="el-icon-plus" @click="add = true">新增</el-button>
            </div>
        </div>
        <el-table :data="tableData"  :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}" class="tableTop" height="100%">
            <el-table-column label="分类名称" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" prop="code" show-overflow-tooltip></el-table-column>
            <el-table-column label="更新时间" prop="x" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit-outline"></el-button>
                    <el-button type="text" icon="el-icon-delete" style="color:red !important"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100">
            </el-pagination>
        </div>
      </el-card>
  </div>
</template>

<script>
export default {
    data(){
        return {
            tableData: [
                {
                    name:'ND-02-01',
                    code:'ND-02-01',
                    x:'121.223444111',
                    y:'37.1222222111',
                    src:''
                },
                {
                    name:'ND-02-01',
                    code:'ND-02-01',
                    x:'121.223444111',
                    y:'37.1222222111',
                    src:''
                },
                {
                    name:'ND-02-01',
                    code:'ND-02-01',
                    x:'121.223444111',
                    y:'37.1222222111',
                    src:''
                },
                {
                    name:'ND-02-01',
                    code:'ND-02-01',
                    x:'121.223444111',
                    y:'37.1222222111',
                    src:''
                },
                {
                    name:'ND-02-01',
                    code:'ND-02-01',
                    x:'121.223444111',
                    y:'37.1222222111',
                    src:''
                }
            ],
            name:''
        }
    }

}
</script>

<style lang="scss" scoped>
/deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 44px;
}

.box-card{
    height:80vh;
    .flexBetween{
        display: flex;
        justify-content: space-between;
        .paddingLeft{
            margin-left:20px;
        }
    }
    .tableTop{
        margin-top:20px;
    }
    .page{
        margin-top:20px;
        text-align: center;
    }
}

</style>